import { connect } from "react-redux";

import TodoList from "./containers/TodoList";

import actions from "../store/action/index";

const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case "SHOW_COMPLETED":
      return todos.filter((t) => t.completed);
    case "SHOW_ACTIVE":
      return todos.filter((t) => !t.completed);
    case "SHOW_ALL":
    default:
      return todos;
  }
};

// 获取state。这个函数通常是选取了state的一个子集，通过props映射到了组件上
const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter),
  };
};
// mapDispatchToProps 用于将操作分派到store。通过props映射到了组件上。
const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(actions.toggleTodo(id));
    },
  };
};

// 没有为 connect() 指定第二个参数，组件将默认接收dispatch
const VisibleTodoList = connect(mapStateToProps, mapDispatchToProps)(TodoList);

export default VisibleTodoList;
